<template>
  <div class="container">
    <div style="margin-top: 8px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div style="display: inline;float: left">
            <el-avatar :src="baseUrl + shareInfo.avatar"></el-avatar>
          </div>
          <h3 style="display: inline;float: left;margin-top: 8px;margin-left: 8px">{{shareInfo.title}}</h3>
        </div>
        <div v-html="contentInfo"></div>
        <div>
          <el-button type="primary" size="mini" icon="el-icon-edit" style="float: right;margin-bottom: 10px" @click="comment">回复讨论</el-button>
        </div>
      </el-card>
    </div>
    <div style="margin-top: 18px">
      <el-card class="box-card" @mouseenter.native="changeShow(index,1,info.username)" @mouseleave.native="changeShow(index,0,info.username)" style="margin-top: 8px;border-radius: 10px" v-for="(info,index) in responses" :key="info.responseId">
        <div slot="header" class="clearfix">
          <div style="float: left;display: inline">
            <el-avatar :src="baseUrl + info.avatarURL"></el-avatar>
          </div>
          <i class="el-icon-delete" style="float: right;color: #C0C4CC" v-show="curIndex == index" @click="deleteResponse(info.responseId)"></i>
          <div style="display: inline;margin-top: 8px;margin-left: 8px;float: left;color: #C0C4CC">{{info.username}}</div>
          <div style="color:#C0C4CC;display: inline;margin-left: 74%;">{{info.createdResponseTime}}</div>
        </div>
        <div v-html="info.content"></div>
      </el-card>
    </div>
    <div class="comment" v-show="editorShow">
      <div style="padding: 0 15px;background-color: #FAFAFA;">
        <el-button type="info" size="mini" plain style="margin-top: 4px" @click="editorShow = !editorShow">取消</el-button>
        <el-button type="primary" size="mini" icon="el-icon-edit" style="float: right;margin-top: 4px;margin-bottom: 4px" @click="reply(ruleForm)">发送</el-button>
      </div>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="content">
          <mavon-editor v-model="ruleForm.content" placeholder="请输入内容..." style="z-index:1;height:60vh;"></mavon-editor>
        </el-form-item>
      </el-form>
    </div>

  </div>

</template>

<script>
import {request} from "../../network/request";
import {getResponseInfo, response} from "../../network/Details/problem/response";

export default {
  name: "ShareDetail",
  data(){
    return{
      ruleForm: {
        content: '',
        problemId: this.$route.query.id,
        username: window.sessionStorage.getItem("username"),
        type: 1
      },
      rules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {min: 3, max: 100, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '请输入内容', trigger: 'blur'}
        ],

      },
      editorShow:false,
      shareInfo:{ },
      responses: [],
      curIndex: -1,
      username:-1,
      contentInfo:'',
      baseUrl: this.$store.state.ossBaseUrl
    }
  },
  methods:{
    comment(){
      this.editorShow = !this.editorShow
    },
    init(){
      let MarkdownIt = require("markdown-it")
      let md = new MarkdownIt()
      let _this = this;
      request({
        url: '/share/' + this.$route.query.id,
        method: 'get',
      }).then(res => {
        _this.shareInfo = res.data
        console.log(res.data)
        _this.contentInfo = md.render(res.data.content)
      })
    },
    responseInfo(){
      let _this = this;
      getResponseInfo(this.$route.query.id, 1).then(res => {
        _this.responses = res.data
      })
    },
    reply(ruleFrom){
      let _this = this;
      if(ruleFrom.content != null && ruleFrom.content.length != 0){
        response(this.ruleForm,'post').then( res=> {
          if(res.data != null){
            this.$message({
              message: '发布成功',
              type: 'success'
            });
            _this.editorShow = !_this.editorShow
            _this.responseInfo()
          }
        })

      }else {
        this.$message.error('回复不能为空');
      }

    },
    changeShow(index,flag,username){
      if(this.username == username){
        this.curIndex = index
        if(flag == 0){
          this.curIndex = -1
        }
      }
    },
    deleteResponse(problemId){
      let _this = this
      request({
        url: '/response/' + problemId,
        method: 'delete',
      }).then(res => {
        if(res.data == true){
          this.$message({
            message: '发布成功',
            type: 'success'
          });
          _this.responseInfo()
        }
      })
    }
  },
  created() {
    this.init()
    this.responseInfo()
    this.username =  window.sessionStorage.getItem("username");
  }
}
</script>

<style scoped>

.box-card{
  margin: 0 auto;
  width: 1000px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.comment{
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  z-index: 1;
  transition-property: transform, opacity, height;
  transition-duration: 0.3s;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0%);
  height: 50vh;
  cursor: auto;
}
.el-icon-delete:hover{
  color: #409EFF;
}

</style>
